import React from 'react'

const Flowers = ({plants,collection}) => {
  return (
    <div className='flowers'>
        {
            !plants || plants.map(item=>{
                return (
                    <div key={item.plantID} className="box">
                        <img src={item.coverURL}/>
                        <span>{item.name}</span>
                        <span>{item.engName}</span>
                        <span>
                            产地：{item.area || "未知产地"} 
                        </span>
                        <button onClick={()=>collection(item.plantID,item.name,item.isCollect)}>{item.isCollect?"已收藏":"收藏"}</button>
                    </div>
                )
            })
        }
    </div>
  )
}

export default Flowers